<template>
	<div class="register">
        <div>
		<div class="register-ipone">
			<h1>登录</h1>
			<a href="">手机验证登录</a>
			<div class="register-input">
			<loginregister></loginregister>
			<div class="code-random">
			<input type="text" placeholder="验证码" class="code"/>
			<span class="random"></span><span class="change">看不清,换一张</span>
			<div class="codeerror"></div>
			</div>
			
			</div>
			<div class="register-forget">
					<input type="radio" />自动登录
			<a href="忘记密码">忘记密码?</a>
			</div>
			<loginregister1></loginregister1>
		</div>
</div>
	</div>
</template>

<script>
import loginregister from '@/components/loginregister'
import loginregister1 from '@/components/loginregister1'
//手机验证
$(function(){
	yanzhengma();
	function yanzhengma(){
	var num = [];
	for(var i=0; i<6; i++){
					var num1 = Math.floor(Math.random()*6);
				     num.push(num1);
			       	$(".random").html(num)
				}	
			}
	$(".ipone").blur(function(){
        var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
        if(reg.test($(".ipone").val())){
        	$(".iponeerror").html(" ")
            $(".iponeerror").addClass("icon1")
        }else if(!reg.test($(".ipone").val())){
        	 $(".iponeerror").removeClass("icon1")
             $(".iponeerror").html('手机号码不正确，请重新输入');
        }
    });
    //密码验证
    $(".word").blur(function(){
        var reg = /^[0-9_a-zA-Z]{6,18}$/;
        if(reg.test($(".word").val())){
        	$(".worderror").html(" ")
            $(".worderror").addClass("icon1");
        }else if(!reg.test($(".word").val())){
        	$(".worderror").removeClass("icon1");
            $(".worderror").html('密码格式不对');
        }else{
            $(".worderror").html(' ');
        }
    });
    //验证码
    $(".change").click(function(){	
				yanzhengma();					
    })
     $(".code").blur(function(){
       if($(".random").html()==$(".code").val()){
    		$(".codeerror").html("");
    		$(".codeerror").addClass("icon1")
    	}else{
    		$(".codeerror").removeClass("icon1");
            $(".codeerror").html('密码格式不对');
    	}	
    });
  
})

	export default {
		name : "register",
		data() { 
			return{}
		},
		components: {
			loginregister,loginregister1
		}
	}
	
</script>

<style scoped>
.register{
		width: 100%;
		background-color: #008CE1;		
}
.register>div{
	width:1180px;
	height: 665px;
	margin: 0 auto;
	border: 1px solid rgba(0,0,0,0);
	background: url(http://www.youhopelife.com/imgs/login_bg.png) 0 100% no-repeat #008CE1;
}
	.register-ipone{
    width: 325px;
    height: 500px;
    background: #fff;
    padding: 30px;
    margin-left: 790px;
    margin-top: 50px;
    overflow: hidden;
	}
	.register-ipone>h1{
		float: left;
    font-size: 24px;
    color: #999;
	}
	.register-ipone>a:nth-of-type(1){
		float: right;
    font-size: 14px;
    color: #008CE1;
    height: 30px;
    line-height: 43px;
    padding-right: 25px;
    background: url(../assets/img/65.png) 100% 100% no-repeat;
    background-size: 20% 80%;
	}
	.register-input>input{
		width: 300px;
		margin: 10px 0;
	}
	.code-random{
		border: 1px solid red; 
		padding-top: 10px;
		overflow: hidden;
	}
	.code-random>span{
		display: inline-block;
		width: 80px;
		height: 37px;
		margin: 0 10px;		
	}
	.code-random>input{
		width: 80px;
		margin-bottom: 10px;
		float: left;
	}
	.random{
		float: left;
		text-align: center;
		line-height: 37px;
		font-size: 16px;
		border: 1px solid black;
	}
	.code-random>span+span{
		cursor: pointer;
		line-height: 37px;	
	}
	.register-input input{		
	border: 1px solid #d3d3d3;
    padding: 3px 8px;
    background: #f9f9f9;
    color: #666;
    height: 37px;  
    font-family: "Microsoft Yahei";
	}
	.register-forget>a{
		text-decoration: underline;
		color: #008CE1;
		margin-left: 200px;
	}
	.codeerror{
		width: 100px;
		margin-bottom: 10px;
	}
	.icon1{
		width:15px;
		height: 15px;
		background: url(../assets/img/duihao.png) 100% 100% no-repeat;
		background-size: 100% 100%;
		clear: both;
	}
	
</style>